<template>
  <div class="item_1">
    <span style="margin-left: 1vw">{{ json.copyRight }}</span>
    <span style="margin-right: 1vw; font-weight: bold">{{ json.manual }}</span>
  </div>
  <span class="item_chapter">{{ json.chapter }}</span
  ><br />
  <span class="item_title">{{ json.title }}</span>
  <div v-for="item in json.procedure">
    <span class="procedure_title">{{ item.title }}<br /></span>
    <div v-for="i in item.detail" class="detail_class">
      <div v-if="i.type != 'table'">
        <span v-if="i.type == 'usual'">
          {{ i.content }}
        </span>
        <span class="detail_warning" v-if="i.type == 'warning'">{{
          i.content
        }}</span>
      </div>
      <div v-else><myTable :table="i.content" /></div>
    </div>
  </div>
</template>

<script setup>
import json from "@/resource/procedure.json";
import myTable from "@/components/myTable/index.vue";
</script>

<style scoped>
.item_1 {
  display: flex;
  justify-content: space-between;
  margin-top: 2vh;
}
.item_chapter {
  display: block;
  font-weight: bold;
  margin-top: 1vh;
  margin-left: 1vw;
}
.item_title {
  display: block;
  margin-left: 1vw;
  font-weight: bold;
  font-size: 20px;
  text-align: center;
  margin-top: 1vh;
}
.procedure_title {
  display: block;
  margin-left: 1vw;
  font-weight: bold;
  font-size: 18px;
  margin-top: 1vh;
}
.procedure_content {
  margin-top: 1vh;
  display: block;
  margin-left: 1vw;
}
.detail_class {
  margin-top: 2vh;
  display: block;
  margin-left: 1vw;
}
.detail_warning {
  font-weight: bold;
  font-size: 18px;
}
</style>
